<template>
  <div v-if="isShow">
    <el-col v-for="(item,index) in companyResourceList" :key="index" :span="6">
      <div style="height: 290px;margin-top: 8px">
        <div style="position: relative;">
          <img style="height: 290px;width: 100%;border-radius: 8px" :src="item.iconUrl">
          <i
            class="el-icon-video-play"
            style="position: absolute;top: 40%;left: 40%;font-size: 50px;color: white"
            @click="play(item)"
          />
        </div>
      </div>
    </el-col>
    <el-dialog
      :visible.sync="isPlay"
      width="800px"
      destroy-on-close
      top="5vh"
    >
      <video-player
        v-if="isPlay"
        :options="options"
        height="450px"
      />
    </el-dialog>
  </div>
</template>

<script>
import { listCompanyResource } from '@/api/iot/iotCompanyResourceApi'
import { getCompanyId } from '@/util/storage'
import VideoPlayer from '@/components/VideoPlayer'
import { getFileType } from '@/util/common'

export default {
  name: 'VideoResource',
  components: {
    VideoPlayer
  },
  data() {
    return {
      companyResourceList: [],
      companyId: getCompanyId(),
      isShow: false,
      isPlay: false,
      options: null
    }
  },
  created() {
    this.listCompanyResource()
  },
  methods: {
    play(item) {
      let type = getFileType(item.url)
      if (type === 'm3u8') {
        type = 'application/x-mpegURL'
      } else {
        type = 'video/' + type
      }

      this.options = {
        autoplay: true,
        controls: true,
        sources: [{
          src: item.url,
          type: type
        }]
      }
      this.isPlay = true
    },
    listCompanyResource() {
      const data = {
        companyId: this.companyId,
        type: 'video',
        status: true
      }
      listCompanyResource(data).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.companyResourceList = data
          if (this.companyResourceList.length !== 0) {
            this.isShow = true
          }
        }
      })
    }
  }
}
</script>

